
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个html页面</title>
</head>

<body>
    <hr>
    hello world.
    <hr>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <hr>

    <div>
        <div>
            <h2>我的项目</h2>
            <ol>
                <li>
                    <h3>留言墙</h3>
                    开发时间：xxx-xxx <p></p>
                    功能介绍：<p></p>
                    <ul>
                        <li>留言</li>
                        <li>匿名</li>
                    </ul>
                </li>
            </ol>
            <ol>
                <li>
                    <h3>学习小助手</h3>
                    开发时间：xxx-xxx <p></p>
                    功能介绍：<p></p>
                    <ul>
                        <li>错题检索</li>
                        <li>同学探讨</li>
                    </ul>
                </li>
            </ol>
        </div>
        <div>
            <h3>个人评价</h3>
            在校期间，表现优秀。
        </div>
    </div>

    <hr>

    <div>
        <div>Java是一门常用语言。</div>
        <div>Java有很多知识点。</div>

        <span style="color: red;">小猫。</span>
        <span style="color: blue;">小狗。</span>
    </div>

    <hr>

    <form action="https://www.baidu.com" method="get">
        姓名：<input type="test"> <br/>
        密码：<input type="password"> <br/>
        性别：<input type="radio" name="sex">男  &nbsp;
        <input type="radio" name="sex">女 <br/>
        爱好：<input type="checkbox">唱歌 &nbsp;
        <input type="checkbox">读书 &nbsp;
        <input type="checkbox">散步 <br/>
        头像：<input type="file">

        <label>我是一个label</label>
        <br/>

        下拉菜单类型：
        <br/>
        大学：<select>
        <option>清华大学</option>
        <option selected="selected">北京大学</option>
        <option>北京师范大学</option>
    </select>
        <br/>
        备注：<textarea rows="8" cols="88"> </textarea>



        <br/>
        <input type="buttom" value="普通按钮"> &nbsp;
        <input type="submit" value="提交"> &nbsp;
        <input type="reset" value="清空">



    </form>

    <hr>
    <h3>无序列表：</h3>
    <bl>
        <li>唐僧</li>
        <li>孙悟空</li>
        <li>猪八戒</li>
        <li>沙悟净</li>
    </bl>

    <h3>有序列表：</h3>
    <ol>
        <li>原子性</li>
        <li>隔离性</li>
        <li>一致性</li>
        <li>持久性</li>
    </ol>

    <h3>自定义列表</h3>
    <dl>
        <dt>标题</dt>
        <dd>联表查询</dd>
        <dd>索引</dd>
        <dd>事务</dd>
    </dl>
    <hr>
    <table border="1" width="300" height="200">
        <thead>
            <th>姓名</th>
            <td>性别</td>
            <td>年龄</td>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td rowspan="2">20</td>
            </tr>
            <tr>
                <td colspan="2">王五|男</td>


            </tr>
        </tbody>
    </table>
    <hr>

    我叫<b>张三</b>，我今年<i>18岁了</i>，我之前的身高是<s>160</s>,现在是<u>170</u>
    <a href="http://www.baidu.com" target="_blank">
        <img src="1.png">
    </a>
    <hr>
    <a href="#one">图片</a>


    <img id="sogou" src="sogou.png">
    <hr>
    <img src="1.png">

    <h1>meta name="viewport" content="width=device-width,initial-scale=1.0" 解释</h1>
    <h3>蒂其之死</h3>
    简单来说
    meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
    <br/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <p></p>
    content属性值 :
    <br/>
    width:可视区域的宽度，值可为数字或关键词device-width
    <br/>
    height:同width
    <br/>
    intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
    <br/>
    maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
    <br/>
    maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
    <br/>
    user-scalable:是否可对页面进行缩放，no 禁止缩放
    <p></p>

    复杂的说：
    <br/>
    移动前端开发之viewport的深入理解
    <br/>
    在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
    <p></p>

    <h2>一、viewport的概念</h2>
    通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
    <p></p>
    图片1： <img src="one.png" id="one" alt="知识点图片">
    <h2>二、css中的1px并不等于设备的1px</h2>
    在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，
    那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，
    css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。
    在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。
    具体可以看下面<a href="https://www.cnblogs.com/yelongsan/p/7975580.html" target="_blank">这个文章</a>。
    <br/>
    图片2： <img src="two.png" alt="知识点图片">


</body>
</html>



<!--  敲 html 然后选择 html5  然后回车就可以了 -->

<!--<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="1.png" alt="这是一只猫">
    E:/桌面/我/编程/java/JavaEE初阶/HTML/1.png
   我的照片不显示？？？
</body>
</html>-->
